import React, { useEffect, useRef, useState } from 'react';
import * as THREE from 'three';
//@ts-expect-error
import RINGS from 'vanta/dist/vanta.rings.min.js';

interface Props {}

export function HomePage({}: Props) {
  const [vantaEffect, setVantaEffect] = useState<any>();
  const myRef = useRef(null);
  useEffect(() => {
    if (!vantaEffect) {
      setVantaEffect(
        RINGS({
          THREE: THREE,
          el: myRef.current,
          mouseControls: true,
          touchControls: true,
          gyroControls: false,
          minHeight: 200.0,
          minWidth: 200.0,
          scale: 1.0,
          scaleMobile: 1.0
        })
      );
    }
    return () => {
      if (vantaEffect) vantaEffect.destroy();
    };
  }, [vantaEffect]);
  return (
    <div className="bg-gray-800 text-white flex" style={{ height: '36rem' }} ref={myRef}>
      <div className="ml-36 mt-24 text-9xl select-none ">
        <span className="font-bold mr-1 text-blue-500">Byte</span>Code
        <div className="text-xl mt-12">一站式编程教学解决方案。</div>
      </div>
    </div>
  );
}
